$prefix-button : #{$prefix}button;
@mixin btn-type ($color-type, $color) {
    &-#{$color-type}{
        color: $color-background;
        border-color: transparent;
        background-color: $color;
        @include outline($color);
        &:hover{
            color: $color-background;
            border-color: lighten($color, $toning-ratio);
            background-color: lighten($color, $toning-ratio);
        }
        &:active{
            color: $color-background;
            border-color: darken($color, $toning-ratio);
            background-color: darken($color, $toning-ratio);
        }
    }
}
.#{$prefix-button}{
    display: inline-block;
    font-weight: 400;
    text-align: center;
    -ms-touch-action: manipulation;
    touch-action: manipulation; // 功能见：https://www.zhangxinxu.com/wordpress/2018/07/chrome-safari-touchmove-preventdefault-treated-as-passive/
    cursor: pointer;
    background-image: none;
    white-space: nowrap;
    user-select: none;
    transition: color $transition-btn-time $bezier,
                background-color $transition-btn-time $bezier,
                border $transition-btn-time $bezier,
                opacity $transition-btn-time $bezier,
                box-shadow $transition-btn-time $bezier;
    font-size: $font-size-base;
    border-radius: $border-radius-button;
    padding: $btn-padding;
    margin: $outline-width;
    line-height: $btn-line-height;
    border: 1px solid;
    @include get-color-border();
    @include outline();
    &:hover{
        color: $color-primary;
        border-color: $color-primary;
    }
    // type对应的样式分类
    &-type{
        @include btn-type(primary,$color-primary);
        @include btn-type(info,$color-info);
        @include btn-type(success,$color-success);
        @include btn-type(warning,$color-warning);
        @include btn-type(error,$color-error);
        &-dashed{
            border-style: dashed;
        }
        &-text{
            border: none;
        }
    }
    // shape对应的样式分类
    &-shape{
        &-circle{
            border-radius: 2em;
        }
    }
    // size对应的样式分类
    &-size{
        &-large{
            font-size: $font-size-large;
        }
        &-small{
            font-size: $font-size-small;
        }
    }
    &>*{
        &.zov-spin{
            color: unset;
        }
        margin-right: 5px;
        &:nth-last-child(1){
            margin-right: 0;
        }
    }
    @include disabled();
}
